<template>
  <div class="new-post">
    <h1>发布新贴</h1>

    <input type="text" v-model="post.title" placeholder="请输入标题"/>
    <br>
    <textarea class="area" placeholder="输入内容" v-model="post.content"></textarea>
    <br>
    <button class="btn" @click="releaseClick">发布</button>

  </div>
</template>

<script type="text/ecmascript-6">
  export default{
    name: 'VNewPost',
    data(){
      return {
        post: {
          title: '',
          content: ''
        }
      }
    },
    mounted(){
      this.$nextTick(() => {

      })
    },
    methods: {
      releaseClick(){
        if (this.post.title === '' || this.post.content === '') {
          alert('输入为空');
          return false;
        }

        this.$$post('/post', {
          title: this.post.title,
          content: this.post.content
        })
          .then((res) => {
            if (res.data.code === 1) {
              alert("成功发布");
              this.$router.push('/index');
            }
            else {
              if (res.data.code === -101) {
                alert(res.data.msg);
                this.$router.push('/login');
              }
              else
                alert(res.data.msg);
            }
          })

      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .new-post {
    width 960px
    margin auto
    text-align center

    input, textarea {
      height 30px
      border 1px solid #c2c2c2
      border-radius 3px
      margin 10px
      padding-left 3px

      transition border, box-shadow 0.5s, 0.5s ease, ease

      &:hover {
        border 1px solid rgb(81, 203, 238)
        box-shadow 0 0 5px rgba(81, 203, 238, 0.5)
      }
    }

    .area {
      width 300px
      height 100px
    }

    .btn {
      width 200px
      height 40px
      background-color deepskyblue
      color white
    }
  }
</style>
